<template>
  <div class="MyTeam-Container">
    <h3>我的团队</h3>
    <p class="description">管理你的团队协作与成员，轻松创建或加入新团队</p>
    <div class="operation-area">
      <button class="create-btn" @click="ToCreate">创建团队</button>
      <button class="join-btn" @click="ToJoin">加入团队</button>
      <div class="search-bar">
        <input type="text" v-model="searchQuery" placeholder="搜索团队名称或负责人" @input="filterTeams" />
      </div>
    </div>
    <h4 class="team-list-title">已加入的团队</h4>
    <div class="team-cards">
      <div 
        v-for="team in filteredTeams" 
        :key="team.id" 
        class="team-card" 
        @click="DetailTeam(team)"
      >
        <div class="team-card-header">
          <div class="team-icon">{{ team.name.charAt(0) }}</div>
          <div class="team-name">{{ team.name }}</div>
          <a class="manage-link" href="javascript:;">管理</a>
        </div>
        <p class="team-description">{{ team.description }}</p>
        <p class="member-count">{{ team.member_count }}名成员</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { useTeamStore } from '../stores/teamStore.ts';
import { useUserStore } from "@/stores/userStore.ts";
import { useServer } from '../components/ts/useServer.ts'
import router from "@/router/index.ts";

const teamStore = useTeamStore();
const userStore = useUserStore();
const { get } = useServer();
const testUrl = 'https://m1.apifoxmock.com/m1/6951272-6668040-default/api'

// 路由通道集合
const ToCreate = () => {
  router.push('/team/create');
}
const ToJoin = () => {
  router.push('/team/join');
}

onMounted(async () => {
  await loadUserTeams();
})

// 加载用户的团队列表
const loadUserTeams = async () => {
  try {
    get('team/list', { userID: userStore.currentUser }, testUrl).then(res => {
      if (res.success) {
        // 关键修改：如果本地已有团队，只添加新的；如果本地没有，再全量赋值
        if (teamStore.teams.length > 0) {
          // 过滤出服务器返回的、本地没有的新团队
          const newTeams = res.teams.filter((serverTeam: { id: string; }) => 
            !teamStore.teams.some(localTeam => localTeam.id === serverTeam.id)
          );
          // 只添加新团队，不覆盖已有数据
          teamStore.teams.push(...newTeams);
        } else {
          // 本地为空时才全量赋值
          teamStore.teams = res.teams;
        }
      } else {
        alert('获取团队列表失败');
      }
    })
  } catch (error) {
    console.error('获取团队列表出错:', error);
    teamStore.error = '获取团队列表失败，请稍后再试';
  }
};

 // 搜索框绑定的数据
const searchQuery = ref('');
const filteredTeams = computed(() => {
  const query = searchQuery.value.toLocaleLowerCase();
  return teamStore.teams.filter((team) => {
    const teamNameMatch = team.name.toLocaleLowerCase().includes(query);
    const leaderMatch = team.admin.toLocaleLowerCase().includes(query);
    return teamNameMatch || leaderMatch;
  });
});

const filterTeams = () => {

}

const DetailTeam = async (team: typeof teamStore.teams[0]) => {
  teamStore.setCurrentTeam(team)

  router.push('/team/detail');
}
</script>

<style scoped lang="scss">
/* 容器整体样式 */
.MyTeam-Container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 标题字样 */
h3 {
  font-size: 50px;
  font-weight: bold;
  margin-bottom: 12px;
  text-align: center;
  position: relative;
}

/* 标题下划线 */
h3::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px; /* 调整下划线位置 */
  transform: translateX(-50%);
  width: 160px; /* 可根据“我的团队”实际宽度调整，大概与文字等长 */
  height: 3px;
  background-color: #1b86b8; /* 灰色线条 */
}

/* 说明文字样式 */
.description {
  font-size: clamp(14px, 1.5vw, 16px);
  color: #666;
  margin-top: 20px;
  margin-bottom: 10px;
  text-align: center;
}

/* 操作区域样式 */
.operation-area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 40px;
  margin-bottom: 30px;
  gap: 10px;
}

/* 创建按钮 */
.create-btn {
  padding: 10px 16px;
  background-color: #007bff;
  color: #fff;
  border: none; 
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  transition: all 0.3s ease;

  &:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
}

/* 加入按钮 */
.join-btn {
  padding: 10px 16px;
  border: 1px solid #007bff;
  border-radius: 8px;
  cursor: pointer;
  background-color: #fff;
  color: #007bff;
  font-size: 18px;
  transition: all 0.3s ease;

  &:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
}

/* 搜索栏 */
.search-bar {
  margin-left: auto;
  width: 500px;
  min-width: 200px;
}

.search-bar input {
  width: 100%;
  padding: 10px 20px;
  font-size: 18px;
  border: 1px solid #dddddd;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.search-bar input:focus {
  outline: none; 
  border-color: #007bff; 
  border-width: 2px; 
}

/* 团队列表 */
.team-list-title {
  font-size: clamp(16px, 1.5vw, 18px);
  font-weight: bold;
  margin-bottom: 20px;
}

.team-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
}

.team-card {
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  cursor: pointer;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05);
  }
}

.team-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0px;
}

.team-icon {
  margin-top: 10px;
  width: 46px;
  height: 46px;
  border-radius: 6px;
  background-color: #e1f5fe;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #007bff;
  font-size: 20px;
}

/* 团队描述 - 与团队名称首字对齐 */
.team-description {
  font-size: 14px;
  color: #666;
  padding-left: 55px;
  flex-grow: 1;
}

.team-name {
  font-weight: bold;
  font-size: 17px;
  margin-left: 10px;
  flex: 1;
}

/* 管理链接 */
.manage-link {
  color: #007bff;
  font-size: clamp(13px, 1vw, 14px);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    color: #9326fa;
    text-decoration: underline;
  }
}

/* 团队描述文字 */
.team-card p {
  font-size: clamp(13px, 1vw, 14px);
  color: #666;
  flex-grow: 1; 
}

/* 成员数量 */
.team-card .member-count {
  margin-top: 25px;
  margin-left: 10px;
  font-size: 13px;
  color: #999;
}
</style>